<template>
  <header class="header-container">
    <tc-flex class="header">
      <tc-icons v-show="leftIcons" direction="left" @click="onClick" :icons="leftIcons"></tc-icons>
      <span v-show="title" class="title">{{ title }}</span>
      <tc-icons v-show="rightIcons" direction="right" @click="onClick" :icons="rightIcons"></tc-icons>
      <slot></slot>
    </tc-flex>
  </header>
</template>

<script lang="ts">
  import Router from 'vue-router'
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  import TcIcons from '@/controls/TcIcons.vue'
  import jQuery from 'jquery'

  @Component({
    components: {
      TcIcons
    }
  })
  export default class TcHeader extends Vue{
    @Prop()
    title: string

    @Prop({
      default: () => {
        return [ { icon: 'back', tag: 'back', name: '', color: '#8E8E93' } ]
      }
    })
    leftIcons: Icons[]

    @Prop()
    rightIcons: Icons[]

    mounted () {
      if (window.cordova) {
        jQuery('.header-container').css('padding-top', '20px');
        StatusBar.styleDefault();
      }
    }

    onClick (tag) {
      if (tag === 'back') {
        this.$router.back()
      } else {
        this.$emit('click', tag)
      }
    }
  }
</script>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@background-color, @font-color) {
  .header-container{
    width: 100%;
    height: @tc-header-height;
    background-color: @background-color;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    
    .header{
      width: 100%;
      height: @tc-header-height;
      position: relative;

      .title{
        width: 100%;
        color: @font-color;
        font-size: @tc-header-font-size;
        line-height: @tc-header-height;
      }
    }

  }
}
.theme-default{
  .theme(@default-tc-header-color, @default-tc-header-font-color)
}
.theme-dark{
  .theme(@dark-tc-header-color, @dark-tc-header-font-color)
}
</style>
